<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-06-23 12:09:31
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-18 16:48:59
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1440px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving || bomUsing">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 730px!important;overflow: auto;">
                    <div class="row align-items-center" style="margin-top: 25px;">
                        <div class="primeng-datatable-container">
                            <p-treeTable [value]="treeData" scrollHeight="600px"
                             (onLazyLoad)="getTreedata()" [scrollable]="true">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 200px">Bom层级</th>
                                        <th style="width: 250px" *ngIf="this.title != 'BOM查看'">操作</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">规格型号</th>
                                        <th style="width: 150px">单位</th>
                                        <th style="width: 150px">Bom用量</th>
                                        <th style="width: 150px">年代号</th>
                                        <th style="width: 150px">备注</th>
                                        <th style="width: 150px">Bom版本</th>
                                        <th style="width: 150px">属性</th>
                                        <th style="width: 150px">类别</th>
                                        <th style="width: 150px">细分类别</th>
                                        <th style="width: 150px">状态</th>
                                        <th style="width: 150px">创建人</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowNode="$implicit" let-rowData="rowData">
                                    <tr [ttSelectableRow]="rowNode" [ttRow]="rowNode"
                                        ttEditableColumn>
                                        <td style="width: 200px">
                                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                            {{rowData.levelNum}}
                                        </td>
                                        <td style="width: 250px" *ngIf="this.title != 'BOM查看'">
                                            <button [hidden]="rowData.materialPropertyName == '零件' " type="button" class="form-btn" (click)="addSonData(rowData,rowNode)">添加子级</button>
                                            <button [hidden]="!addFlag || rowData.levelNum != 3" type="button" class="form-btn" (click)="import(rowData)">导入</button>
                                            <!-- <button [hidden]="rowData.levelNum == 3 " type="button" class="form-btn" (click)="delete(rowData)">删除</button> -->
                                            <button [hidden]="rowData.levelNum >=4 " type="button" class="form-btn" (click)="repair(rowData)">维护用量</button>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialNo}}</td>
                                        <td style="width: 150px">{{rowData.materialName}}</td>
                                        <td style="width: 150px">{{rowData.model}}</td>
                                        <td style="width: 150px">{{rowData.unitName}}</td>
                                        <td style="width: 150px">
                                            <span *ngIf="rowData.levelNum>=4">{{rowData.unit1BomDosage}}</span>
                                        </td>
                                        <td style="width: 150px">
                                            <span >{{rowData.yearsNo}}</span>
                                        </td>
                                        <td style="width: 150px">
                                            <span *ngIf="rowData.levelNum>=4">{{rowData.remark}}</span>
                                        </td>
                                        <td style="width: 150px">{{rowData.versionNo}}</td>
                                        <td style="width: 150px">{{rowData.materialPropertyName}}</td>
                                        <td style="width: 150px">{{rowData.materialTypeName}}</td>
                                        <td style="width: 150px">{{rowData.materialSegmentationName}}</td>
                                        <td style="width: 150px">{{selectStatus(rowData.status)}}</td>
                                        <td style="width: 150px">{{rowData.createUserName}}</td>
                                    </tr>
                                </ng-template>
                            </p-treeTable>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button *ngIf="!addFlag" type="submit" class="btn btn-primary" [disabled]="!bopForm.form.valid || bomUsing" [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>确认</span></button>
                </div>

            </form>
            <!-- 子集 -->
            <materialSon #materialSon [editData]="rowdata" [title]="sonTitle" [addSecond]="secondSon" [type]="sonType" [flag]="addFlag" [propy]="propy" (modalSave)="backToAdd($event)">
            </materialSon>
            <!-- 导入弹窗 -->
            <p-dialog header="导入文件" [(visible)]="display" modal="modal" [responsive]="true">
                <p>提示：导入前请先下载模板<a style="color:#41ABE9" (click)="down()">点击下载模板</a></p>
                <p-fileUpload *ngIf="display" name="file" customUpload="true" (uploadHandler)="myUploader($event)"
                 accept='application/vnd.ms-excel' multiple="false" maxFileSize="1000000"
                    chooseLabel="请选择上传文件" uploadLabel="上传" cancelLabel="取消">
                    <ng-template pTemplate="content">
                        <ul *ngIf="uploadedFiles.length">
                            <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                        </ul>
                    </ng-template>
                </p-fileUpload>
                <p-footer>
                    <button type="button" pButton icon="fa-close" (click)="display=false" label="取消"></button>
                </p-footer>
            </p-dialog>
            <!-- 修改子集4-5弹窗 -->
            <p-dialog class="sonDialog" header="维护子集用量" [(visible)]="bomUsing" modal="modal" [responsive]="true"
                (onHide)="onHide($event)" [style]="{width: '1390px', height: '420px'}">
                <div class="modal-body" style="height: 306px;overflow: auto;">
                    <div class="row align-items-center">
                        <div class="primeng-datatable-container">
                            <p-treeTable [value]="sonData" [scrollable]="true" scrollHeight="290px">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 100px">Bom层级</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">规格型号</th>
                                        <th style="width: 220px">年代号</th>
                                        <th style="width: 120px">Bom用量</th>
                                        <th style="width: 150px">细分类别</th>
                                        <th style="width: 150px">单位</th>
                                        <th style="width: 150px;">创建人</th>
                                        <th style="width: 250px">备注</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowNode="$implicit" let-rowData="rowData">
                                    <tr [ttSelectableRow]="rowNode" [ttRow]="rowNode" ttEditableColumn>
                                        <td style="width: 100px">
                                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialNo}}</td>
                                        <td style="width: 150px">{{rowData.materialName}}</td>
                                        <td style="width: 150px">{{rowData.model}}</td>
                                        <td style="width: 220px">
                                            <p-treeTableCellEditor
                                                *ngIf="rowData.levelNum >=4 && rowData.materialSegmentationName == '标准件' ">
                                                <ng-template pTemplate="input">
                                                    <input style="width: 200px;" (blur)="submitDetail(rowData)"
                                                        [name]="rowData.id+rowData.sonId" type="text"
                                                        [(ngModel)]="rowData.yearsNo">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.yearsNo}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span
                                                *ngIf="rowData.levelNum < 4 && rowData.materialSegmentationName != '标准件'">
                                                {{rowData.yearsNo}}</span>
                                        </td>
                                        <td style="width: 120px">
                                            <p-treeTableCellEditor *ngIf="rowData.levelNum >= 4 ">
                                                <ng-template pTemplate="input">
                                                    <input style="width: 100px;" (blur)="submitDetail(rowData)"
                                                        [name]="rowData.sonId" type="number"
                                                        [(ngModel)]="rowData.unit1BomDosage">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.unit1BomDosage}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span *ngIf="rowData.levelNum < 4 "> {{rowData.unit1BomDosage}}</span>
                                        </td>
                                        <td style="width: 150px">{{rowData.materialSegmentationName}}</td>
                                        <td style="width: 150px">{{rowData.unitName}}</td>
                                        <td style="width: 150px">{{rowData.createUserName}}</td>
                                        <td style="width: 250px">
                                            <p-treeTableCellEditor *ngIf="rowData.levelNum >=4">
                                                <ng-template pTemplate="input">
                                                    <input (blur)="submitDetail(rowData)" [name]="rowData.id"
                                                        type="text" [(ngModel)]="rowData.remark">
                                                </ng-template>
                                                <ng-template pTemplate="output">
                                                    {{rowData.remark}}
                                                </ng-template>
                                            </p-treeTableCellEditor>
                                            <span *ngIf="rowData.levelNum < 4"> {{rowData.remark}}</span>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-treeTable>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="margin-top: 14px;">
                    <button style="margin-left: 20px;" pButton type="button" label="确认"
                        (click)="onHide(1)"></button>
                </div>
            </p-dialog>
            <!-- 审批 -->
            <bomApproval #bomApproval [editData]="sonData" (modalSave)="backToApproval()"></bomApproval>
        </div>
    </div>
</div>